<template>
  <div id="tools">
    <el-collapse v-model="activeTools">
      <el-collapse-item title="标注工具" name="tools" class="tools-type" style="background-color: #f4f5f7;">
        <el-tooltip v-for="item in toolType" :key="item.type" placement="top" :content="item.tip" effect="light">
          <el-button :icon="item.icon" @click="setToolType(item.type)" :class="{'choosed-tool-type':nowType == item.type}" class="spebutton">
          </el-button>
        </el-tooltip>
      </el-collapse-item>
      <el-collapse-item title="属性" name="attr">
        <el-tooltip effect="light" content="颜色选择" placement="top">
          <el-color-picker v-model="color" show-alpha></el-color-picker>
        </el-tooltip>
        <el-popover placement="bottom" title="线条粗细" width="200" trigger="hover" style="display:inline-block;vertical-align: top;">
          <el-slider v-model="lineThick" :format-tooltip="formatTooltip" :step="10" show-stops></el-slider>
          <el-button icon="fa fa-circle-thin fa-2x" slot="reference" class="spebutton"></el-button>
        </el-popover>
      </el-collapse-item>
      <el-collapse-item title="素材基本信息" name="msg">
        <el-form label-position="top" label-width="80px" :model="msg">
          当前状态：{{msg.status == 1 ? "未发布" : msg.status == 2 ? "暂存" :"已发布"}}
          <el-form-item label="标题">
            <el-input v-model="msg.title"></el-input>
          </el-form-item>
          <el-form-item label="简要介绍">
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入内容" style="padding:0 5px;" v-model="msg.introduce">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveTag(2)">暂存</el-button>
            <el-button type="primary" @click="saveTag(3)">保存并发布</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getTagOtherMsg, updateTagOtherMsg, uploadBase64Img } from "@/api/front/tag"
export default {
  data() {
    return {
      activeTools: ["tools", "attr", "msg"],
      nowType: 0,
      toolType: [
        { icon: 'fa fa-mouse-pointer fa-2x', type: 0, tip: '鼠标' },
        { icon: 'fa fa-square-o fa-2x', type: 1, tip: '矩形框' },
        { icon: 'fa fa-circle-o fa-2x', type: 2, tip: '圆形框' },
        { icon: 'fa fa-map-marker fa-2x', type: 3, tip: '标点' }
      ],
      color: 'rgba(10, 146, 244, 1)',
      lineThick: 50,
      msg: {
        title: '',
        introduce: '',
        status: ""
      }
    }
  },
  props: {
    base64: {
      default: "",
      type: String
    }
  },
  created() {
    getTagOtherMsg({ objid: this.$route.query.objid }, (res) => {
      if (res.code == 200) {
        this.msg = res.data
      }
    })
  },
  methods: {
    //设置标注类型
    setToolType(type) {
      this.nowType = type
      this.$emit("changeToolType", type)
    },
    //线条粗细格式化
    formatTooltip(val) {
      return 0.5 + val / 100 * 4;
    },
    //保存
    saveTag(status) {
      if (status == 3) {
        if (!this.msg.title) {
          this.$message.error("保存并发布需要填写标题")
          return
        }
        else {
          this.$emit("getBase64");
          let that = this;
          this.$nextTick(() => {
            that.$message.success("正在为您上传绘制过的图片，请稍后");
            uploadBase64Img({ data: that.base64,objid:that.$route.query.objid }, (res) => {
              if (res.code == 200) {
                that.msg.sta = status;
                updateTagOtherMsg(that.msg, (res) => {
                  if (res.code == 200) {
                    that.msg.status = res.status
                  }
                }, true)
              }
            }, true)
          })
        }
      }
      else {
        this.msg.sta = status;
        updateTagOtherMsg(this.msg, (res) => {
          if (res.code == 200) {
            this.msg.status = res.status
          }
        }, true)
      }

    }
  },
  watch: {
    color: {
      handler(val) {
        this.$emit("changeColorThick", val)
      },
      immediate: true
    },
    lineThick: {
      handler(val) {
        this.$emit("changeLineWidth", val / 100 * 4 + 0.5)
      },
      immediate: true
    }
  },

}
</script>

<style lang="less" scoped>
#tools {
  width: calc(100% - 20px);
  height: calc(100% - 10px);
  padding: 0 10px 10px 10px;
  overflow-y: auto;
}
.spebutton {
  padding: 5px 8px !important;
}
/deep/ div[role="button"] {
  background-color: #f4f5f7 !important;
}
/deep/ div[role="tabpanel"] {
  background-color: #f4f5f7 !important;
}
.choosed-tool-type {
  color: #409eff;
  border-color: #409eff;
}
</style>